{% extends "kadmin/base.html" %}

{% block content_title %}
  <h1>Elastic Search - Synonym Editor</h1>
{% endblock %}

{% block content %}
  <style>
    .errornote,
    .notice,
    p,
    textarea {
      box-sizing: border-box;
      max-width: 600px;
    }

    .notice {
      font-weight: bold;
    }

    textarea {
      height: 400px;
      width: 600px;
      border-left: 0;
      margin-left: 0;
      padding-left: 7px;
      line-height: 14px;
    }

    .line-numbers {
      box-sizing: border-box;
      display: inline-block;
      font-size: 9px;
      line-height: 14px;
      margin: 2px 0;
      height: 400px;
      overflow: hidden;
      padding: 4px 7px 2px 5px;
      border: 1px solid #ccc;
      border-right: 1px dotted #ddd;
      text-align: right;
      opacity: 0.8;
    }
  </style>

  <section>
    <p>
      There are currently {{ synonym_add_count }}
      synonym{{ synonym_add_count|pluralize }} that have not been synced to ES,
      and {{ synonym_remove_count }} synonym{{ synonym_add_count|pluralize }}
      that need to be removed from ES.
    </p>

    <form method="POST">
      {% csrf_token %}
      <input type="hidden" name="sync_synonyms" value="1">
      <input type="submit" value="Sync synonyms to ES">
    </form>

    <p>
      Press this button to update the synonym list in Elasticsearch to match
      what is in the database.
    </p>

    <p>
      Keep in mind that changing synonyms will cause a small down time
      to the search system, during which time users will receive a friendly
      error message, and some parts of the site will be slower. This downtime
      should only last a few seconds. Consider doing this during off-peak
      hours, like after 00:00 UTC.
    </p>
  </section>

  <section>
    <p class="notice">
      This is an advanced way to edit synonyms with no training wheels.
      It is intended for bulk insertion and mass editing by expert users.
      If that doesn't sound like you, you can use the
      <a href="{% url 'admin:search_synonym_changelist' %}">simpler interface</a>
      instead. Remember to come back here and click that sync button above
      after editing the synonyms.
    </p>

    <p>
      This is <strong>all</strong> the synonyms for the site. If you add a line,
      it will create a new synonym set. If you delete a line, that synonym will
      be deleted. Be careful!
    </p>

    <p>
      The format here is one synonym set per line. A synonym set is a set of
      words on the left that will be transformed into the set of words on the right, with a
      "fat arrow" (<code>=></code>) in between. Each of the words on the left
      set will be converted to all of the words on the right. For example a line
      like <code>social => facebook, twitter</code> would make a search for
      "social integration" match all of the documents "facebook integration"
      and "twitter integration". It's fine to have multi-word phrases like
      <code>address bar, location bar, awesome bar => address bar, location bar, awesome bar</code>,
      which would make those three phrases completely interchangeable.
    </p>

    <p>
      Note that the original word is lost during the conversion. If you want to
      keep the original words(s) in the search, include those words on the right,
      For example <code>social => facebook, twitter, social</code>. Also,
      synonyms are one way only. If you want two way synonyms, you need two
      lines, or to put all words on both sides.
    </p>

    {% for error in errors %}
      <span class="errornote">
        {{ error }}
      </span>
    {% endfor %}

    <form method="POST">
      {% csrf_token %}
      <input type="submit" value="Save">
      <br>
      <!-- No space between these elements. -->
      <div class="line-numbers"></div><textarea name="synonyms_text">{{ synonyms_text }}</textarea>
    </form>

    <p>Note, those are line numbers, not ID numbers.</p>
  </section>

  <script type="text/javascript">
    // jquery isn't loaded yet. lame.
    var textbox = document.querySelector('[name=synonyms_text]');
    var lineNums = document.querySelector('.line-numbers');
    function makeLineNumbers() {
      var numLines = textbox.value.match(/\n/g).length + 1;

      var linesHtml = '';
      for (var i = 1; i <= numLines; i++) {
        linesHtml += i + '<br>';
      }
      lineNums.innerHTML = linesHtml;
      lineNums.scrollTop = textbox.scrollTop;
    }

    textbox.addEventListener('change', makeLineNumbers);
    textbox.addEventListener('keyup', makeLineNumbers);
    textbox.addEventListener('scroll', function() {
      lineNums.scrollTop = textbox.scrollTop;
    });
    makeLineNumbers();
  </script>

{% endblock %}
